<template>
  <view class="container">
    <view class="header">
      <text class="title">宠物管理</text>
      <button size="mini" class="add-btn" @click="openAddForm">+ 添加宠物</button>
    </view>

    <!-- 宠物列表 -->
    <view v-if="pets.length" class="pet-list">
      <view v-for="pet in pets" :key="pet.id" class="pet-item" @click="viewPet(pet)">
        <image class="pet-avatar" src="/static/icons/dog.png"></image>
        <view class="pet-info">
          <text class="pet-name">{{ pet.name }}</text>
          <text class="pet-type">{{ pet.type || '未知类型' }}</text>
        </view>
        <view class="pet-actions">
          <button size="mini" @click.stop="openEditForm(pet)">编辑</button>
          <button size="mini" type="warn" @click.stop="deletePet(pet.id)">删除</button>
        </view>
      </view>
    </view>
    <view v-else class="empty">还没有宠物，快来添加吧~</view>

    <!-- 宠物详情弹窗 -->
    <view v-if="showDetail" class="popup-mask" @click="closeDetail">
      <view class="popup" @click.stop>
        <text class="popup-title">宠物详情</text>
        <view class="detail">
          <text>名称：{{ petDetail.name }}</text>
          <text>类型：{{ petDetail.type }}</text>
          <text>品种：{{ petDetail.breed }}</text>
          <text>性别：{{ genders[petDetail.gender] }}</text>
          <text>年龄：{{ petDetail.age }} 岁</text>
          <text>体重：{{ petDetail.weight }} kg</text>
          <text>绝育：{{ yesNo[petDetail.neutered] }}</text>
          <text>疫苗：{{ yesNo[petDetail.vaccinated] }}</text>
          <text>备注：{{ petDetail.remark }}</text>
        </view>
      </view>
    </view>

    <!-- 新建/编辑宠物表单 -->
    <view v-if="showPetForm" class="popup-mask" @click="closePetForm">
      <view class="popup" @click.stop>
        <text class="popup-title">{{ formMode === 'add' ? '新增宠物' : '编辑宠物' }}</text>

        <view class="form">
          <input v-model="petForm.name" placeholder="宠物名称" class="form-input"/>
          <input v-model="petForm.type" placeholder="类型（如狗/猫）" class="form-input"/>
          <input v-model="petForm.breed" placeholder="品种" class="form-input"/>
          <picker mode="selector" :range="genders" @change="e => petForm.gender = parseInt(e.detail.value)">
            <view class="picker">性别：{{ genders[petForm.gender] }}</view>
          </picker>
          <input v-model="petForm.age" type="number" placeholder="年龄(岁)" class="form-input"/>
          <input v-model="petForm.weight" type="digit" placeholder="体重(kg)" class="form-input"/>
          <picker mode="selector" :range="yesNo" @change="e => petForm.neutered = parseInt(e.detail.value)">
            <view class="picker">绝育：{{ yesNo[petForm.neutered] }}</view>
          </picker>
          <picker mode="selector" :range="yesNo" @change="e => petForm.vaccinated = parseInt(e.detail.value)">
            <view class="picker">疫苗：{{ yesNo[petForm.vaccinated] }}</view>
          </picker>
          <textarea v-model="petForm.remark" placeholder="备注" class="form-textarea"></textarea>
        </view>

        <button class="submit-btn" @click="submitPetForm">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      pets: [],
      petDetail: {},
      showDetail: false,
      showPetForm: false,
      formMode: 'add',
      petForm: { gender: 0, neutered: 0, vaccinated: 0 },
      genders: ['未知', '弟弟', '妹妹'],
      yesNo: ['否', '是']
    }
  },
  onShow() { this.loadPets() },
  methods: {
    async loadPets() {
      const user = uni.getStorageSync('user')
      if (!user || !user.userId) return
      const res = await request({ url: `/pet/list/${user.userId}`, method: 'GET' })
      if (res.code === 200) this.pets = res.data || []
    },
    async viewPet(pet) {
      const user = uni.getStorageSync('user')
      const res = await request({ url: `/pet/${pet.id}`, method: 'GET', data: { userId: user.userId } })
      if (res.code === 200) {
        this.petDetail = res.data
        this.showDetail = true
      }
    },
    closeDetail() { this.showDetail = false },
    openAddForm() {
      const user = uni.getStorageSync('user')
      this.formMode = 'add'
      this.petForm = { userId: user.userId, gender: 0, neutered: 0, vaccinated: 0 }
      this.showPetForm = true
    },
    openEditForm(pet) {
      this.formMode = 'edit'
      this.petForm = { ...pet }
      this.showPetForm = true
    },
    closePetForm() { this.showPetForm = false },
    async submitPetForm() {
      const url = this.formMode === 'add' ? '/pet/add' : '/pet/update'
      const method = this.formMode === 'add' ? 'POST' : 'PUT'
      const res = await request({ url, method, data: this.petForm })
      if (res.code === 200) {
        uni.showToast({ title: this.formMode === 'add' ? '添加成功' : '修改成功', icon: 'success' })
        this.showPetForm = false
        this.loadPets()
      }
    },
    async deletePet(id) {
      const user = uni.getStorageSync('user')
      const res = await request({ url: `/pet/delete/${user.userId}/${id}`, method: 'DELETE' })
      if (res.code === 200) {
        uni.showToast({ title: '删除成功', icon: 'success' })
        this.loadPets()
      }
    }
  }
}
</script>

<style scoped>
.container { padding: 20rpx; background: #f8f8f8; min-height: 100vh; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
.title { font-size: 32rpx; font-weight: bold; }
.add-btn { background: #07c160; color: #fff; }

/* 列表 */
.pet-list { display: flex; flex-direction: column; gap: 20rpx; }
.pet-item { background: #fff; border-radius: 12rpx; padding: 20rpx; display: flex; align-items: center; justify-content: space-between; }
.pet-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; }
.pet-info { flex: 1; }
.pet-name { font-size: 28rpx; font-weight: 600; }
.pet-type { font-size: 24rpx; color: #666; }
.pet-actions { display: flex; gap: 10rpx; }

/* 弹窗 */
.popup-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; }
.popup { background: #fff; padding: 30rpx; border-radius: 16rpx; width: 80%; }
.popup-title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; display: block; }

/* 表单 */
.form { display: flex; flex-direction: column; gap: 20rpx; }
.form-input, .form-textarea { border: 1rpx solid #ddd; border-radius: 8rpx; padding: 16rpx; font-size: 28rpx; }
.picker { padding: 20rpx; border: 1rpx solid #ddd; border-radius: 8rpx; font-size: 28rpx; color: #333; }
.submit-btn { background: #07c160; color: #fff; margin-top: 20rpx; }
.detail { display: flex; flex-direction: column; gap: 10rpx; font-size: 28rpx; }
</style>
